* {
   font-family: Arial, Helvetica, sans-serif;
}

body {
    font-size: 101.1%;
    border: 0;
    margin: 0;
    padding: 0;
    background-color: #FFF;
    min-width: 760px;
}

table
{
    font-size: 1em;
}

h1 {
    font-size: 1.5em;
}

h2 {
    font-size: 1.2em;
}

hr.divider { visibility: hidden; }

img {
    border: 0;
}

a img {
    vertical-align: middle;
}

form {
    margin: 0;  
}

th {
    text-align: inherit; /* Fix IE8 bug where th does not inherrit styles */
}

#contentcontainer {
    margin-left: 30px;
}

#tabscontainer {
    margin-left: 20px;
	width: auto; /* Please do not remove without consulting FiZ! */
}

#headerLinks {
	background-color: transparent;
	position: absolute;
	right: 0;
	padding: 10px;
	font-size: 0.8em;
	text-align: right;
  white-space: nowrap;
}


/* FiZ - styling for NAV | spacers */
#headerLinks,
div.toolbar,
span.navSep {
    color: #EEE;
}


#roninheader
{
    float: left;
    width: 350px;
}

#roninheaderimage {
     background: url(../images/olibng.jpg);
     background-repeat: no-repeat;
     height: 56px;
     width: 400px;
     position: absolute;
     top: 0px;
}

a:link, a:visited
{
    color: #034EA2;
}

input.linkliketext
{
    border: 0;
    background-color: transparent;
    color: #034EA2; 
    text-decoration: underline; 
}

a:hover
{
    color: #FF7600;
}

input.linkliketext:hover
{
    color: #FF7600;
    cursor: pointer;
}

.main_Header
{
    display: block; 
    height: 56px; 
    padding: 0;
    margin:0;  
    background-color: #FFF;
    border-bottom: 1px solid #CCCCCC;
	 position: relative;
}

.main_Body
{
    display: block;
    margin-top: 10px;
    /* margin-bottom: 20px; */
	 margin-bottom: 0;
    min-height: 340px;
}

html>body .main_Body    /* This is hidden from IE6 */
{
    height: auto;
}

.main_BodySidebar
{
    padding: 0 10px 0 0;
    font-size: 0.8em;
    margin: 0;
}

.basicFormInner {}

.main_Footer
{
     text-align:right;
     font-size:0.7em;
	  padding: 10px 65px 0 0;
	  height: 22px;
     background: url(../images/oclclogo.gif) no-repeat right top;
}

.main_TabsRow
{
     display: block;
     padding-left: 0;
     padding-right: 0;
     background-color: #293645;
     overflow: hidden;
     width: 100%;
     background: url("../images/tab_bg.gif") repeat-x bottom;
     background-color: #F8F8F8;
}

.main_TabsRow .tabs
{
    font-size: 0.7em;
    background-color: transparent;
}

.main_Sidebar
{
    position:relative;
    top:-10px;
    float:right;
    z-index: 10;
    width:220px;  /* for IE5/WIN */
    voice-family: "\"}\"";
    voice-family:inherit;
    width:200px; /* actual value */
    margin:10px 0 0 0;
}

.main_SidebarPanel
{
    margin-top: 0px;
    margin-bottom: 20px;
    margin-left: 10px;
    margin-right: 0px;
    font-size: 0.8em;
    width:200px;
}

html>body .main_SidebarPanel
{
    width:190px;
}
.main_SidebarPanel h2
{
    margin: 0;
    background-color:#333;
    text-align:left;
    padding:3px 10px; 
    font-weight:bold;
    background-position:3px 3px;
    color: #FFF;
    font-size: 1.1em;
    border-top: 1px solid black;
}

.main_SidebarPanel p
{
    background-color:#ECECEC; /* Light grey */
    padding-left:6px;
    padding-right:6px;
    padding-top:6px;
    padding-bottom:6px;
    font-size: 1em;
    margin: 0;
}

.main_SidebarPanel ul
{
    padding-left:6px;
    padding-right:6px;
    padding-top:6px;
    padding-bottom:6px;
    font-size: 1em;
    margin: 0;
    list-style:none;
}

.main_SidebarPanel li
{
    background-color:#FFF;
    padding:3px 10px;
}

.main_SidebarPanel ol
{
    padding:6px;
    font-size: 1em;
    margin: 0;
    padding-left: 1.5em;
}

 .workflowCurrent {
    font-weight:bold;
}

 .workflowFuture {
    color:#C7CCCF; /* FiZ - WC Grey 30% */
}

.workflowPast {}

/* === Basic Form === */
.basicForm {
    font-family:sans-serif;
}

.basicFormInner .basicForm {
    background-color: #f9f9f9;
}

.recordDisplay {}

.basicFormCaption {
    text-align:left;
    padding:5px 10px 1px; 
    font-weight:bold;
    font-size: 1em;
    color: #333;
}

.basicFormCaption,
.main_Body .tabs {
	background-color: #FFF;
}

.searchInputArea .basicFormCaption {
      background-image: none;
      background-color: transparent;
      border:0;
}

.searchInputArea form {
      padding-bottom: 10px;
}
 
.loginForm .searchInputArea .basicForm, 
#rnSearch .searchInputArea .basicForm {
     background-color: #f9f9f9;
     border: 1px solid #CCC;
     background: url(../images/bg_gradation.gif) bottom repeat-x;
}


#optionsScreen .searchInputArea .basicForm {
     border: 1px solid #CCC;
     background: #000 url(../images/bg_gradation.gif) repeat-x 0px -344px;
     background-color: #E2E2E2 !important;
}



.basicFormInner {
      width: 100%;
      float:left;
		/* margin-bottom */
      padding-bottom: 10px;
}

/*
.basicFormInner .basicFormInner {
		margin-bottom: 0;
		padding-bottom: 10px;
}
*/

.basicFormInnerSplit {
     clear: both;
     height: 0;
     display: inline;
}

.basicForm .basicFormLabel {
    text-align:left;
    vertical-align:bottom;
    background-color:#ECECEC; /* Light grey */
    color:#333; /* Almost black */
    text-decoration:none;
    font-weight:bold;
    padding:3px 0px 3px 5px;
    margin-top:6px;
    background-color: transparent;
    font-weight: normal;
}

.basicForm .basicFormButtons {
    padding-top: 10px;
}

.basicForm .basicFormButtonsRight {
    text-align: right;
    padding-top: 10px;
}


/* === Basic Table === */

table.basicTable {
    empty-cells:show;
    font-family:sans-serif;
    width: 100%;
}

table.basicTable caption {
    text-align:left;
    background: url(../images/corner_caption.gif) no-repeat top left;
    background-color: #EFEFEF;
    border-bottom: 1px solid #CCC;
    vertical-align: middle;
    color:#000;
    padding: 5px 10px 10px 10px;
    font-size: 0.85em;
}

table.basicTable th { /* for column view */
    text-align:left;
    font-weight:bold;
    padding: 5px;
    vertical-align:middle;
    background-color:#F9F9F9; 
    border-right:1px solid #F3F3F3;
    border-bottom: 1px solid #F3F3F3;
    color:#333; 
}

table.basicTable td.basicTableActions {
    border-right:none;
    border-bottom:none;
    vertical-align:middle;
    background-color: #F6F6F6;
    border-bottom: 1px solid #DDD;
	font-size: 1em;
} 

table.basicTable td {
    border-left:none;
    border-top:none;
     border-bottom:solid 1px #DDD;
     padding: 5px 10px;
      vertical-align: top;
}

.basicTableFooter {
    text-align:left;
    vertical-align: middle;
    color:#000;
    padding: 5px 10px 10px 10px;
    font-size: 0.85em;
    font-family:sans-serif;
}

.basicTableFooter.pagination {
    background-color: #EFEFEF;
    border-bottom: 1px solid #CCC;
}

.basicTableFooter form {
    margin: 0;
    padding: 0;
}

.basicTableFooter input {
    font-size: 0.85em;
}

.basicTableFooter select {
    font-size: 0.85em;
}

td.basicTableActions form {
    margin: 0;
    padding: 0;
}

caption form {
    margin: 0;
    padding: 0;
}


/* Form Buttons */

input.button,
a.button
{
    color: #FFF;
    font-weight:bold;
    margin: 0;
    text-decoration: none;
    background-color:#2178B5;
    border:solid 1px #034EA2;
    cursor: pointer;
	 m: expression(this.onmouseover = new Function("this.fizix=this.className; this.className = this.fizix+' hoverIE';"));
}

input.button:hover,
a.button:hover,
input.hoverIE
{
    color: #FFF;
    font-weight:bold;
    background-color: #FF7600;
    border: 1px solid #C74A1B;
	 m: expression(this.onmouseout = new Function("this.className = this.fizix;"));
}

.buttonDisabled {
    color:#848687;
    background-color:#EEE;
    border:solid 1px #999;
    font-weight:bold;
    cursor: default;
    margin:0;
}

input.button,
input.buttonDisabled {
	 padding: 0px !important;
	 width:auto;
	 overflow:visible;
	 text-align: center;
}

/* Record Actions hyperlink style Buttons */

.recordTableActions input.button {
	border: 0;
	background-color: transparent;
	font-size: 1.1em !important;
	color: #4b9547;
	padding: 0 !important;
	text-decoration: underline;
}

.recordTableActions input.buttonDisabled {
	border: 0;
	background-color: transparent;
	font-size: 1.1em !important;
	padding: 0 !important;
}

.recordTableActions input.button:hover,
.recordTableActions input.hoverIE {
	border: 0;
	background-color: transparent;
	font-size: 1.1em !important;
	color: #FF7600;
	text-decoration: underline !important;
	padding: 0 !important;
	text-decoration: underline;
}

.recordTableActions input {
	float: left;
}


/* Operation List Control */

/* Only do this in Display Mode because Edit mode is structured differently */
#rnDisplay .operationsList {
        width: 100%;
}
.operationsList {
	float: right;
}

.operationsList select {
	float: left;
}

.operationsList input.button,
.operationsList input.button:hover {
	float: left;
}



/* Search Option hyperlink style Buttons */

.searchOptions input.button, .searchOptions a.button {
	border: 0;
	background-color: transparent;
	font-size: 0.85em;
	color: #034EA2;
	padding: 0 !important;
	text-decoration: none;
	font-weight: bold;
}

.searchOptions input.buttonDisabled, .searchOptions a.buttonDisabled {
	border: 0;
	background-color: transparent;
	font-size: 0.85em;
	padding: 0 !important;
	text-decoration: none;
	font-weight: bold;
}

.searchOptions input.button:hover,
.searchOptions input.hoverIE,
.searchOptions a.button:hover,
.searchOptions a.hoverIE
 {
	border: 0;
	background-color: transparent;
	font-size: 0.85em;
	color: #FF7600;
	text-decoration: underline !important;
	padding: 0 !important;
	text-decoration: none;
	font-weight: bold;
}

.searchOptions input, .searchOptions a {
	float: right;
	margin-left: 1em;
}


/* === Tabs === */

div.tabs {
	background:url("../images/tab_bg.gif") repeat-x bottom;
	width: auto;
}


.tabs ul {
    margin:0;
    padding:10px 0 0;
    list-style:none;
	 /*
    max-width:100%;
	width: 100%;
	*/
}

.main_TabsRow div.tabs {
	padding-left: 10px;
}

.tabs li {
    float:left;
    margin:0;
    padding:0 0 0 9px;
    border-bottom: 1px solid #CCC;
}

.tabs input {
    border:0;
}

.tabs .tabContent {
    float:left;
    display:block;
    width:.1em;
    padding:5px 9px 4px 0px;
    text-decoration:none;
    font-weight:normal;
    color: #666;
    font-weight: bold;
    white-space:nowrap;
}


/* Top Level & Search Results - Tab Style */

.tabs li {
    background:url("../images/tab_left.gif") no-repeat left top;
}

.tabs .tabContent {
    background:url("../images/tab_right.gif") no-repeat right top;
}

/* Main Body - Tab Style (usually darker) */

.main_Body .tabs li {
    background: url("../images/tab_bodyleft.gif") no-repeat left top;
}

.main_Body .tabs .tabContent {
    background: url("../images/tab_bodyright.gif") no-repeat right top;
}


.tabs .tabContentText {
    text-decoration:none;
    font-weight:normal;
    color: #666;
    font-weight: bold;
    white-space:nowrap;
}
.tabs > ul .tabContent {
    width:auto;
}

.tabs > ul .tabContent > strong {
    max-width: 13em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    margin-bottom: -3px;
}

    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    .tabs a {float:none;}
    /* End IE5-Mac hack */
    .tabs .tabContent:hover {
}

.tabs .currentTab {
    background-position:0 -150px;
    border-width:0;
    display: inline-block;
}
.tabs .currentTab .tabContent {
    background-position:100% -150px;
    padding-bottom:5px;
    color:#333;
}

#searchTableTabs {
	font-size: 0.85em;
	padding-bottom: 0.5em;
	padding-top: 0.5em;
	background-color: transparent;
}
#searchTableTabs #selectLinks {
	margin-left: 1em;
	float: left;
}
#searchTableTabs #viewLinks {
	margin-right: 1em;
	float: right;
}

/* Alternative Tabs (Active By Default) */

.tabs .tabContent a {
	display: block;
	float: left;
	padding-top: 5px;
	padding-bottom: 4px;
	padding-right: 10px;
	background: url("../images/tab_bodyright.gif") no-repeat right top;
}

.tabs .currentTab .tabContent a {
	display: inline;
	float: none;
	background-position:100% -150px;
	background-image: none;
	padding-right: 0;
}

.tabs .tabContent {
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
}

.tabs .currentTab .tabContent {
    padding:5px 10px 5px 1px;
}

.tabs li.tabHasEditRecord,
.tabs li.tabHasEditRecord .tabContent strong,
.tabs li.tabHasEditRecord a:link,
.tabs li.tabHasEditRecord a:visited {
  color: #C00;
}

.tabs li.tabHasIssuesDesk img {
  vertical-align: middle;
}

/* /alternative tabs */




.tabs li a:hover {
    text-decoration: underline;
    color: #FF7600 !important;
}

li.currentTab a:hover {
    text-decoration: none;
    color: #000 !important;
} 

.tabs li a:link, .tabs li a:visited {
    color: #034EA2;
}

/* TABLE ACTIONS */

td.basicTableActions,
.recordTableActions {
	font-size: 0.85em;
}

td.basicTableActions *,
div .recordTableActions * {
	font-size: 1em;
}

#rnDisplay .recordTableActions form {
	margin: 5px;
}

/* Smallest option buttons size */
.operationsList,
#rnEdit div.recordTableActions {
	font-size: 0.8em;
}

.operationsList,
.recordTableExpanded div *,
#rnEdit div.recordTableActions div * {
	font-size: 1em;
}

/* New clearspace around actions */

.recordTableActions div input.buttonDisabled,
.recordTableActions div input.button {
        margin-top: 0.3em;
        margin-right: 0.6em;
}

.operationsList {
	margin-top: 0.3em;
	padding: 0px;
}

.recordTableContracted .recordTableActions {
	display: none;
}

.recordTableExpanded, .recordTableContracted {
    padding: 0;
}




/* SEARCH RESULTS */

.searchResultsHeader
{
    padding: 5px;
}

.rowselected
{
    background-color: #E2F3FC;
}

table.basicTable caption * {
    font-size: 1em;
}

td.basicTableActions * {
    font-size: 1em;
}

#rnSearch .rowselected td {
	background-color: #F4F8FB; /* FiZ - WC Blue 5% */
	border-bottom: 1px solid #A6C9E1 !important; /* FiZ - WC Blue 40% */
}

#rnSearch .rowdeselected {
	background-color: transparent;
}

.searchselect {
    width: 10px; 
    vertical-align: top; 
    padding-bottom: 5px; 
    padding-top: 5px;
}

.searchresult {
    vertical-align: top; 
    padding-bottom: 5px; 
    padding-top: 5px;
}

.searchresult ul {
    padding: 0;
    margin: 0;
}

.searchresult li
{
    list-style-type: none;
}

.searchresultmain
{
}

/* Make the result titles bold on both result views */
.searchresultmain li, 
a.searchresultmain
{
     font-size: 1em;
     font-weight: bold;
}

.searchresultmain li b { /* FiZ Test */
    display: none;
}

.searchresultextra
{
}

.searchresultextra li
{
     margin: 0.2em 0;
     font-size: 0.85em;
     color: #666;
     float: left;
     padding-right: 1em;
}
 
 
.searchresultextra li b { /* FiZ Test */
     font-weight: normal; 
}

.searchresultextra .firstentry
{
}

.searchresultactions
{
    display: none;
}

.searchresultactions li
{
    display: inline;
    padding-left: 0.3em;
    padding-right: 0.3em;
    border-left: 0.1em solid #000;
}

.searchresultactions .firstentry
{
    border: 0;
    padding-left: 2em;
}

.actionsform
{
    margin: 0;
    padding: 0;
}

.operationHidden
{
    color: GrayText;
}

.operationVisible
{
}

div.operationsList
{
    float: left;
    padding: 0;
}

.operationsEmptyList
{
    float: left;
    display: none;
}

.searchInputArea
{
    float: left;
    width: 100%;
}

.NopageErrors {
	display: none;
}

.pageErrors,
.ErrorBox {  /* WC Style error */
    background-color: #ffc;
    border: 1px solid #c00;
    color: #c00;
    margin: 0 0 10px 0;
    padding: 5px 10px;
    min-width:200px;
}

.ErrorField {  /* WC Style error, without padding */
    background-color: #ffc !important;
    border: 2px solid #c00 !important;
    color: #c00 !important;
    margin: 0 0 10px 0;
    min-width:200px;
}

.pageNotice {  /* WC Style error */
    background-color: #ffc;
    border: 1px solid #ccc;
    color: black;
    margin: 0 0 10px 0;
    padding: 5px 10px;
}

.pageErrors p, .pageNotice p {
    margin: 0;
}

.pageLinks
{
    float: right; 
    margin-top: 0.5em;
}

#editFormButtons
{
    text-align: left;
    padding-top: 10px;
}



#editFormButtons input
{
    margin-left: 5px;
    margin-right: 5px;
}

#main { 
  margin: 0px auto;
  text-align: left;
}


.recordDisplay #main/*, .basicFormInner #main (this needs to also only apply to Editable records displays */ {
    padding: 10px;
    background-color: #F9F9F9;
    margin: 0 !important;
}

.main_Body #main .basicForm {
    border: 1px solid #CCC;
    padding: 10px;
    background-color: #f9F9F9;
}


.floater{float:left;}

.basicForm:after, .tabs ul:after, .tabs:after, .basicFormInner:after, .fauxWidth:after, .floatcon:after{clear:both;content:".";display:block;height:0px;overflow:hidden;visibility:hidden;}
.basicForm, .tabs ul, .tabs, .basicFormInner, .fauxWidth, .floatcon{zoom:1;}


.main_SidebarPanel p {
     background-color:#f3f3f3;
}

.editFieldBordered, .tableFieldBordered {
     display: block;
}

/* New stretchy code */
.nonStretchyGroup {
    z-index: 1;
    position: relative;
    white-space: nowrap;
    float: left;
}

.stretchySingleGroup {
    position: relative;
    float: left;
    clear: both;
}

.labelControl {
    float: left;
    width: 100%;
    font-size: 1em;
    text-align: left;
    white-space: normal;
}

.nonStretchyControl {
    font-size: 1em;
    text-align: left;
    white-space: normal;
    float: left;
    width: 100%;
}

.slideShim {
    position:absolute; 
    top:0px; 
    left:0px; 
    width:0px;
    height:0px;
    z-index: 90;
    filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);
}

html>body .slideShim    /* This is hidden from IE6 */
{
    display: none;
}


/* Breadcrumbs */

ul.breadcrumb {
    padding-left:0;
    margin-bottom: 10px;
    margin-left:0;
    background-color: transparent;
    display: block;
}

li.breadcrumb {
    font-size: 0.8em;
    display: inline;
    padding-right: 0.25em;
    max-width: 10em;
    display: inline-block;
}

li.breadcrumb a.currentPoint {
    font-weight: bold;
    color: #455560; /* FiZ - WC Grey */
}

li.breadcrumb a.pastPoint {
    font-weight: normal;
    color: #455560; /* FiZ - WC Grey */
}

li.breadcrumb a.futurePoint {
    color: #A2AAAF; /* FiZ - WC Grey 50% */
}

li.breadcrumb#firstbreadcrumb {
    padding-left: 0;
}

/* Attribute hierarchy bread-crumb */

*.hierarchy-model > a {
    font-color: #000;   
}

em.hierarchy-model {
    font-color: #000;
}

*.hierarchy-model ul.trail {
    padding-left: 0;
    margin-bottom: 10px;
    margin-left: 0;
    background-color: transparent;
    display: block;
    list-style-type: none;
}

*.hierarchy-model ul.trail li {
    font-size: 0.8em;
    font-weight: normal;
    color: #333;
    display: inline;
    padding-right: 0.25em;
}

*.hierarchy-model ul.trail li.firstcrumb {
    padding-left: 0;
}

.hierarchy-model .scrolly-div {
    overflow: auto;
    max-height: 20em;
    font-size: 0.9em;
}

.long-scrolly-div {
    overflow: auto;
    max-height: 30em;
    min-height: 10em;
    font-size: 0.9em;
    clear: both;
}

.standout {
    background:yellow;
    font-weight:bold;
}

.collapsed-div-header {
    color:#034ea2;
    font-weight:bold;
    border-top:1px solid #F8F8F8;
    border-bottom:1px solid #EEE;
    cursor: pointer;
    display: block;
    background: url(../images/ronin_panelclosed.gif) no-repeat;
    padding: 3px 0 3px 15px;
    overflow: hidden;
    font-size: 0.9em;
}

.collapsed-div {
    color:#034ea2;
    cursor: pointer;
    display: block;
    padding: 3px 0 3px 15px;
    overflow: hidden;
    max-height: 0;
    font-size: 0.9em;
}

.expanded-li-item {
    font-weight:normal;
}

.list-surround > .two-columns,
.long-scrolly-div > .two-columns {
    float: left;
    width: 50%;
}

.trim-ellipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.scrolly-div ul {
    padding-top: 0;
    margin-top: 0;
    list-style-type: none;
    padding-left: 0;
    margin-left: 0;
}

.scrolly-div ul li {
    padding-top: 0.25em;
    display: block;
    width: auto;
}

.scrolly-div ul li a:link, .scrolly-div ul li a:visited {
    color: #034EA2;
}

.scrolly-div ul li a:hover {
    color: #d56000;
    background-color: transparent;
}

.hierarchy-type {
    color: #040404;
    font-size: 0.85em;
    display: block;
}

/* Sorting Options */

.sorting-options {
	font-size: 1em;
	line-height: 2.25em;
}

.sorting-options .combo-no-icon {
  line-height: 1.5em;
}

.sorting-options > #add-sort-button {
    font-size: 1em;
}

*.sorting-options *.sorting-option {
    display: inline;    
    white-space: nowrap;
}

*.sorting-options *.sorting-option select {
    font-size: 1em;
    display: inline;
	 margin-left: 5px;
}

*.sorting-options *.sorting-option .button {
    font-size: 0.85em;
}

/* Filtering options */
table.search-refinements {
    margin-top: 0.5em;
}

tr.invalid-refinement {
    color: red;
    font-weight: bold;
    font-style: oblique;
}

tr.refinement td, tr.invalid-refinement td {
    font-size: 0.85em;
}

tr.refinement td select, tr.invalid-refinement td select {
    font-size: 0.85em;
}

tr.refinement td input, tr.invalid-refinement td input {
    font-size: 0.85em;
}

tr.refinement td *.refinement-data, tr.invalid-refinement td *.refinement-data {
    padding-bottom: 3px;
    white-space: nowrap;
}

input.number-refinement {
    width: 4em;
}

input.date-refinement {
    width: 18em;
}

ul.flat-list, ul.column-list {
    margin: 0;
    list-style-type: none;
    display: block;
    padding: 0;
}

tr.column-list td {
    margin: 0;
    padding: 0;
    font-size: 1em;
    vertical-align: top;
    padding-left: 2em;
    text-indent: -2em;
}

.flat-list > .filter-item-elem {
    float: left;
}

.list-surround > .filter-item-elem {
    height: 1.7em;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 50%;
}

.list-surround > .filter-item-elem:nth-of-type(4n), .list-surround > .filter-item-elem:nth-of-type(4n-1) {
    background: #EFEFEF;
}

.list-surround > .filter-item-elem:nth-of-type(4n-2), .list-surround > .filter-item-elem:nth-of-type(4n-3) {
    background: #FFFFFF;
}

span.list-surround {
  /*  padding: 0.5em; */
}

ul.flat-list li {
    padding: 0 0.5em 0 0;
    float: left;
}

ul.flat-list li span {
    white-space: nowrap;
}
	
ul.flat-list li input {
    margin: 0.1em;
}

ul.column-list li {
    display: block; 
}

/* Tool bar */

.toolbar {
    display: block; 
    margin-bottom: 0.2em;
    padding-bottom: 0.2em;
    text-align: right;
	font-size: 0.85em;
}

.toolbar .button, .toolbar .buttonDisabled, .toolbar .buttonHover {
    margin-right: 10px;
}

.savedSearchJS {
    display: none;
}

.savedSearchNoJS {
    display: block;
}

#savedSearchTable caption {
    cursor: pointer;    
}

#savedSearchTable caption:hover, #savedSearchTable .clickableHeaderHover {
    color: #FF7600;
}

.savedSearchJS ul, .savedSearchNoJS ul {
    padding: 6px;
    font-size:0.96em;
    margin: 0;
    list-style:none;
    background-color:white;
    color: black;
}

.savedSearchJS li, .savedSearchNoJS li {
    background-color: transparent;
    padding:3px 10px;
}

.searchInputArea .basicForm
{
    padding: 10px;
    padding-top: 0;
}

#editFormButtons .button {}

/** Options Screen */
div.optionsForm {
  margin-left: 12%;
  margin-right: 12%;
  float: none;
}

#optionsScreen .fieldName {
    width: 30%; 
    text-align: right; 
    float: left; 
    padding-right: 1em;
}

#optionsScreen .subtitle {
    width: 90%; 
    text-align: center;
    font-weight:700; 
}

#optionsScreen .fieldValue {
    width: 60%; 
    text-align: left; 
    float: left;
}

#optionsScreen .fieldRow {
    width: 100%; 
    padding-bottom: 10px;
}

.toolbarButton {
    text-decoration: none;
    white-space: nowrap;
}

a.toolbarButtonHighlight:link,
a.toolbarButtonHighlight:visited
{
    text-decoration: none;
    font-weight: bold !important;
    color: red !important;
    white-space: nowrap;
}

.toolbarButton img {
	position: relative;
}

.toolbar .toolbarButton img {
	position: static;
}

.toolbarButtonDisabled {
    text-decoration: none;
    color: gray;
    cursor: default;
}

a.toolbarButtonDisabled {
    text-decoration: none;
    color: gray;
    cursor: default;
}

.toolbarButtonImage {
    margin-right: 3px;
}

.tableControl {
    background-color: #F9F9F9;
    border: 1px solid #CCC;
}

.tableControl table {
    width: 100%;
}

.tableControl td, .tableControl th {
    padding-right: 10px;
}

table.selectionTable {
  table-layout: fixed;
  width: 100%;
}


.tableControl .tableContents {
  overflow: hidden; 
  vertical-align: top;
  white-space: nowrap;
}

html>body .tableControl .tableContents {
    /* white-space: nowrap; */
}

.textControl {
    background-color: white;
    border: 0;
}

.textControl .textControlContents {
    border: 1px solid #CCC;
    height: 99%; /* IE needs this */
    padding-left: 3px;
    white-space: -moz-pre-wrap; /* Firefox */
    white-space: pre-wrap;
    -moz-tab-size: 60; /* Firefox */
    -o-tab-size: 40; /* Opera */
    tab-size: 60; /* Chrome, Safari : tab-size not supported in IE  */
    word-wrap: break-word; /* IE */
}

.tabCharacter {
   display: inline;
   border-bottom: 1px dotted #222;	
}

.secSearchIndicator {
    float:left;
}

.secSearchIndicatorInner {
    margin-left: 32px;
}



.main_Body .tabs a:link,
.main_Body .tabs a:visited {
	text-decoration: none;
}

.main_Body .tabs a:hover {
	text-decoration: underline;
}

.main_Body .tabs .currentTab {
    background-position:0 -150px;
    border-width:0;
}

.main_Body .tabs .currentTab .tabContent {
    background-position:100% -150px;
    padding-bottom:5px;
    color:#333;
}
.searchResultsHeading {
    float: left; 
    /* height: 1.5em;  */
    margin-top: 0.25em;
}

.searchResultsHeading form {
	padding: 0;
}


/* FiZ - Removes form padding from below the Hits Per Page control */
form.searchResultsHitsPerPage {
    padding-bottom: 0;
    display: inline;
}

div.annotationTableWrapper {
	border:1px solid #CCC !important;
	margin-bottom: 10px;
	height: 10em;
	overflow: auto;
}
table.annotationTable {
	width: 100%;
	border-collapse: collapse;
}

.annotationTable .annotation {
	width: 100%;
}

.annotationTable a {
	color: #000;
	text-decoration: none;
}

.annotationsSelect {
	background-color: #fff; 
	width: 100%;
	border: 0;
	text-align: left;
}

.annotationTable .selected, .annotationTable .selected .annotationsSelect {
    background-color: #E2F3FC;
}

.annotationTitle input {
    width: 100%;
}

.annotationTitle {
    padding-bottom: 0.5em;
    width: 100%;
}
.annotationBody textarea {
    width: 100%;
    height: 10em;
	 margin-bottom: 0.5em;
}

.annotationButtons {
    float: left;
}
#annotationspermissionsComboLink {
    float: right;
}
.annotationSpinner {
    float: right;
}

.annotationSpinner img {
    height: 16px;
    padding-top: 5px;
}

.workspacewindows {
    padding: 0;
    margin: 0;
    list-style: none;
}
.workspacewindows li {
    padding: 0;
    margin: 0;
}

/* Login Form */

.login-column { width: 50%; margin-left:-10px;}
.login-welcome { float: right; width: 49%; }

div.loginForm { width: 100%; float: left; }

div.loginForm select { width: 90%; min-width: 5em; }
div.loginForm option { font-size: 0.9em;}

.frmLab {
  min-width: 5em;
  margin-right: 10px;
	float: left;
  text-align: right;
  width: 5em;
}

div.loginForm div.frmFld,
div.frmSel
 {
 margin-left: 5.8em;
  left: 0;
  margin-right: 10px;
  padding-left: 7px;
}

div.loginForm div.frmFld input.textField {
	width: 100%;
	margin: 0 0 0 -7px; /* includes Mozilla textarea fix */
	float: left;
	padding-right: 0;
}

div.frmSel {
  padding: 0;
}

/* Wrapping version for page with no minimum width */
/*
div.fauxWidth.frmFld,
div.frmFld {
	float: left;
  width: 70%;
  padding: 0;
}
*/



div.frmTxt {line-height:1.5em;}

div.fauxWidth.frmFld input.textField,
div.fauxWidth.frmFld input.passField {
  min-width: 5em;
  margin: 0;
}

div.loginForm .floatcon {
	margin-bottom: 10px;
}

div.loginForm .floatcon.lastRow {
	margin: 0;
}

/* Post login UserName  display */

div.userName { 
   font-size: 0.8em;
	margin-top: 5px;
	color: #333;
	text-align: right;
	background-color: #FFF;
}

/* Saves Search List */

.savedSearchList {
	width: 100%;
	height: 25em;
	overflow: auto;
}
 

select {	padding:0; margin: 0; border:1px solid #7f9db9; }

/* Form Text Fields */ 
 
.textField,
.passField,
.readOnlyArea {
	border: 1px solid #7f9db9; /* Change to red when editing CSS */
	padding: 0 0 0 0.4em;
}

.readOnlyArea {
    height: 1.4em;
}

div#optionsPage,
div#optionsPage .textField,
div#optionsPage .passField {
	width: 100%;
}

.textControl, .tableControl {
	border: 0;
	background-color: #e3e3e3;
	background-color: #ececec;
}

div.recordTableActions,
td.calendaricon {
	background-color: #f9f9f9;
}


div.recordTableExpanded div.recordTableActions {
	padding: 0;
	display: block;
}


table.selectionTable {
	margin-top: 0;
	border: 1px solid #A6C9E1;
}

.editFieldBordered,
.tableFieldBordered {
	border:1px solid #A6C9E1 !important;
}

.editFieldBordered table.selectionTable,
.tableFieldBordered table.selectionTable {
	border: 0;
}


table.selectionTable th {
	white-space: nowrap;
	color: #333;
}

table.selectionTable td {
	padding-top: 0;
	padding-bottom: 0;
}

html>body table.selectionTable tr {
	height: 0;
}

.cboxfaux {
	width: 16px;
	height: 16px;
	border: 0;
	margin: 0;
	padding: 0;
	cursor:pointer;
}
.rowselected .cboxfaux {
     background: url(../images/cbox_faux_on.gif);
}
.rowdeselected .cboxfaux {
     background: url(../images/cbox_faux_off.gif);
}

/* Scrolling Table */
.scrollyTable { overflow: auto; }
div.scrollyTable { resize:vertical;} 
.scrollyTable table { width:100%; border: none; background-color: transparent; resize:none;}
.scrollyTable td	{ color: #000; padding-right: 2px; }

.scrolltableContainer { position: relative; border: 0;}
.scrolltableContainer th { white-space: nowrap; }
.scrolltableContainer .tableFieldBordered { border: 0 !important; }

/* Vertical Aligns on various form Elements (Grouped for individual fixes) */

div.sorting-options form { display: table-cell; }
div.sorting-options form input { vertical-align: middle; }

.buttonControl { padding-bottom:0.3em; padding-left: 0.3em; }


/* False Text/Text Area Input Widths */

div.fauxWidth {
	padding: 0;
	padding-left: 7px;
}

div.fauxWidth input.textField,
div.fauxWidth textarea.textField {
	width: 100%;
	margin: 0 0 0 -7px; /* includes Mozilla textarea fix */
	float: left;
	padding-right: 0;
}
div.fauxWidth.frmFld input.colourField {
    width: 100%;
    margin: 0 0 0 -7px; /* includes Mozilla textarea fix */
    float: left;
    padding-right: 2px;
    padding-left: 2px;
}

.calendaricon img {
	margin: 1px;
}


/* Heading text on Records - Fontsize overridden below */
/* Needs to be fixed in core code 16pt in config to 1.6em */
/*
div.display_15, div.display_10024 {
	font-size: 1.6em;
}
*/


/* Accessible hide */

.hideme {
	margin-left: -999%; height: 1px; width: 1px;
	overflow: hidden; position:absolute; display: block;
}

.newline {
	clear: both; height:0px;
	overflow: hidden; /* IE6 vertfix */	
}


/* Selection table TD Borders */

table.selectionTable {
	border-collapse: collapse;
}

table.selectionTable td {
	border: 1px solid #CCC;
}
table.selectionTable th {
	border-top: 1px solid #CCC;
	border-left: 1px solid #CCC;
	border-right: 1px solid #CCC;
}

div.tableFieldBordered {
	border: 0 !important;
}

.toolbarCombo {
    text-decoration: none;
    white-space: nowrap;
}

.toolbarComboOpened {
    text-decoration: none;
    white-space: nowrap;
    background-color: #eee;
    z-index: 101;
    position: relative;
}


.toolbarComboDisabled {
    text-decoration: none;
    color: gray;
    cursor: default;
}

a.toolbarComboDisabled {
    text-decoration: none;
    color: gray;
    cursor: default;
}

.toolbarComboImage {
    margin-right: 3px;
}

.toolbarComboArrow {
}

.toolbarComboContents {
	position: absolute;
	z-index: 100;
	background-color: #EEE;
  border: 1px solid #CCC;
  border-width: 0 1px 1px 0;
	padding: 5px 10px;
	color: black;
  white-space: nowrap; /* IE Fix */
  text-align: left;
}

.combo-label,
.combo-no-icon {
  text-align: left;
  white-space: nowrap;
}

.combo-no-icon {
  display: block;
}

.combo-icon {
}

.shimmy {
    filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);
}

.layoutComboRow {
  padding-top: 2px;
  margin: 2px 0;
}
  
.layoutComboRow {
}

.layoutComboRow a {
	text-decoration: none;
	vertical-align: middle;
}

.layoutComboRow img {
	vertical-align: middle;
  margin-left: 5px;
}

.alternativesComboRow {
	text-align: left;
}

.alternativesHeaderComboRow {
	text-align: left;
}

.alternativesComboRow a {
	text-decoration: none;
	vertical-align: middle;
	text-align: left;
}

.savedAlternativesComboRow,
.folderAlternativesComboRow {
	text-align: left;
}

.savedAlternativesHeaderComboRow,
.folderAlternativesHeaderComboRow {
	text-align: left;
}

.savedAlternativesComboRow a,
.folderAlternativesComboRow a
 {
	text-decoration: none;
	vertical-align: middle;
	text-align: left;
}

.displayAttachmentsComboRow {
}

.displayAttachmentsComboRow a {
	text-decoration: none;
	vertical-align: middle;
}

.displayAttachmentsComboRow img {
	vertical-align: middle;
  margin-left: 5px;
}

/* Additions for folders */

div.foldersList
{
    float: left;
    padding: 0;
}

.foldersEmptyList
{
    float: left;
}

.operationsList {
	float: right;
}

.foldersList select {
	float: left;
}

.foldersList input.button,
.foldersList input.button:hover {
	float: left;
}

.foldersList,
#rnEdit div.recordTableActions {
	font-size: 0.8em;
}

.foldersList,
.recordTableExpanded div *,
#rnEdit div.recordTableActions div * {
	font-size: 1em;
}

/* Required Fields */
.requiredField .textControlContents, .requiredField input, .requiredField select, .requiredField textarea {background-color: #ffc;}
.requiredField .textControlContents, .requiredField div.fauxWidth input.textField,.requiredField div.fauxWidth textarea.textField{border:1px solid #4b9547; }
.requiredField .select-wrap { display:block; border-top: 1px solid #4b9547;}  /* IE layout will break if side borders are applied */

.workspaceLink {
}

.currentWorkspaceLink {
	font-weight: bold;
}

input.linkButton, input.linkButtonDisabled {
	background-color: transparent;
	border: 0;
	margin: 0;
	padding: 0;
}

input.linkButton {
	color: #034ea2;
	cursor: pointer;
	text-decoration: underline;
  text-align: left;
}

input.linkButtonDisabled {
	color: #000000;
}

input.linkButton:hover {
	color: #ff7600
}

#hideheaderbar, #showheaderbar {
	position: absolute;
	top: 0;	
	width: 100%;
	height: 10px;
	overflow: visible;
}

#hideheaderbar #hideheaderbutton, #showheaderbar #showheaderbutton {
	cursor: pointer;
	position: relative;
	width: 100px;
	height: 10px;
	margin-left: auto;
	margin-right: auto;
	display: block;
}

#hideheaderbar #hideheaderbutton {
	background: url(../images/rollup.gif);
	background-repeat: no-repeat;
}
#showheaderbar #showheaderbutton {
	background: url(../images/rolldown.gif);
	background-repeat: no-repeat;
}
#searchspinner {
	float: left;
	display: none;
}

#optionsScreen li.toolbar {
    float: right;
    background: transparent;
    border: 0;
}

#locationsComboComboDiv a {
    background-color: transparent;
}

/* RON-2166 The separator doesn't render correctly in IE6.0, so we have added in a fixed width and
 set the font-size to zero. */
.separatorRow,
.separatorComboRow {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    height: 1px;
    width: 120px; 
    background: black;
    font-size: 0;
}

html>body .separatorComboRow    /* This is hidden from IE6 */
{
    width:100%;
}

.myPermissionsDialog .myPermissionsHeader {
    font-weight: bold;
}

.myPermissionsDialog .permissionsList {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-top: 1em;
}

.myPermissionsDialog .permissionsList li {
    margin: 0;
    padding: 0;
}

.permissionsButtons {
    margin-top: 1em;
    text-align: right;
}

.permissionsHeader {
    font-weight: bold;
    margin-bottom: 1em;
}

.myPermissionsDialog .myPermissionsCurrent {
    margin-bottom: 1em;
}

.permissionsSearch label {
    display: block;
    font-weight: bold;
}

.permissionsSearch .permissionsSearchInput {
    width: 98%;
}

.permissionsSearchNoScript .permissionsSearchInput,
.permissionsSearchNoScript .permissionsCompleteList {
    width: 90%;
}
.permissionsAutocompleteItemUSER,
.permissionsAutocompleteItemGROUP {
    padding-left: 20px;
    background-repeat: no-repeat;
    background-position: top left;
}

.permissionsAutocompleteItemUSER {
    background-image: url(../images/user.png);
}
.permissionsAutocompleteItemGROUP {
    background-image: url(../images/group.png);
}

.sharePermissionsDialog .shareMode {
    margin-bottom: 0.5em;
}

.sharePermissionsDialog .shareGlobally {
    margin-bottom: 0.5em;
}

.sharePermissionsDialog .shareGroups {
    margin-bottom: 0.5em;
}

.sharePermissionsDialog .shareRecipient {
    margin-bottom: 0.5em;
}

#advancedPermissionsDialog #advancedPermissionsCurrent {
    margin-bottom: 1em;
    overflow: auto;
    max-height: 20em;
}

#advancedPermissionsDialog #advancedPermissionsCurrent .recipient {
    font-weight: bold;
}

#advancedPermissionsDialog #advancedPermissionsCurrent .recipientUSER,
#advancedPermissionsDialog #advancedPermissionsCurrent .recipientGROUP {
    padding-left: 20px;
    background-repeat: no-repeat;
    background-position: top left;
}

#advancedPermissionsDialog #advancedPermissionsCurrent .recipientUSER {
    background-image: url(../images/user.png);
}
#advancedPermissionsDialog #advancedPermissionsCurrent .recipientGROUP {
    background-image: url(../images/group.png);
}

#advancedPermissionsDialog #advancedPermissionsCurrent div {
    margin: 0;
    padding: 0;
    margin-left: 20px;
    margin-bottom: 0.5em;
    overflow:hidden;
}

#advancedPermissionsDialog #advancedPermissionsCurrent div span.permissions {
    display:block;
	margin: 0;
	padding: 0;
	margin-right: 1em;
    white-space: nowrap;
    float:left; 
    height: 20px;
}

#advancedPermissionsDialog #advancedPermissionsCurrent div span.permissions span {
    margin: 0;
    padding-left: 20px;
    background-repeat: no-repeat;
    background-position: top left;
    display:block;
}
/* grant button has the unchecked checkbox */
#advancedPermissionsDialog #advancedPermissionsCurrent div span.permissions .grantButton {
     background-image: url(../images/cbox_faux_off.gif);
}

/* revoke button has the checked checkbox */
#advancedPermissionsDialog #advancedPermissionsCurrent div span.permissions .revokeButton {
     background-image: url(../images/cbox_faux_on.gif);
}

/* can't revoke button has the grey checked checkbox, means the permission is granted indirectly */
#advancedPermissionsDialog #advancedPermissionsCurrent div span.permissions .cantRevokeButton {
     background-image: url(../images/cbox_faux_on_grey.gif);
}


#advancedPermissionsDialog #advancedPermissionsCurrent div span.permissions .grantAllButton {
     background-image: url(../images/grantall.png);
}

#advancedPermissionsDialog #advancedPermissionsCurrent div span.permissions .revokeAllButton {
     background-image: url(../images/revokeall.png);
}

#advancedPermissionsDialog #advancedPermissionsCurrent div span.permissions .resetButton {
     background-image: url(../images/reset.png);
}

a.advancedPermissionsLink {
    color: #000;
    text-decoration: none;
}

.canGrantButton, .canRevokeButton, .grantAllButton, .revokeAllButton, .resetButton {
    cursor: pointer;
}

html>body .ie6only    /* Any element assigned this class will only be visible in IE6 */
{
    display:none;
}

div.listControlInput
{
	border:1px solid #7F9DB9;
	padding-left:2px;
	padding-right:2px;
	padding-top:0;
	padding-bottom:0;
	background-color:white;
}
div.listControlInput input
{
	display:block;
	width: 100%;
	padding:0;
	border-width:0;
}

/* classes for sheet editor */

div.sheetEditorOuter
{
	border:1px #7F9DB9 solid;
	padding:0;
}

div.sheetEditorHeader
{
	font-weight: bold;
	background-color: #7F9DB9;
	color: white;
	font-weight: bold;
	text-align:center;
	padding:2px;
}

div.sheetEditorInner
{
	padding:10px;
}

div.rowselected.sheetEditor
{
	background-color:transparent;
	position:relative;
}

div.rowselected div.sheetEditorItem
{
	border: 1px dashed #ddd;
	background-color:#E2F3FC;
	cursor:default;
}

div.rowselected div.sheetEditorItem.at_type_E
{
    color: #000;
	border:1px dashed #ddd;
	padding-left:5px;
	padding-right:5px;
	padding-top:0px;
	padding-bottom:0px;
	background-color:#E2F3FC;
}

div.rowdeselected div.sheetEditorItem
{
	border: 1px solid transparent;
	cursor:default;
}

*html div.rowdeselected div.sheetEditorItem /* for ie6 only */
{
	border: 1px solid #F9F9F9;
}

div.sheetEditorItem.at_type_B
{
    color: #FFF;
    font-weight:bold;
    margin: 0;
    text-decoration: none;
    background-color:#2178B5;
    border:solid 1px #034EA2;
    display:inline;
    float:right;
}

div.rowdeselected div.sheetEditorItem.at_type_E
{
	border:1px solid #7F9DB9;
	padding-left:5px;
	padding-right:5px;
	padding-top:0px;
	padding-bottom:0px;
}
div.sheetEditorItem.at_type_E.at_changemethod_C
{
	height:19px;
}

div.sheetEditorComboButton
{
     background-image: url(../images/lm_combobutton.gif);
     background-repeat: no-repeat;
     width:17px;
     height:19px;
     position:relative;
     top:-16px;
}


div.rowdeselected div.sheetEditorItem.at_type_L
{
    color: #000;
	border:1px solid #CCC;
	background-color:#ECECEC;
}

div.sheetEditorItem.at_type_L
{
    padding-left:5px;
	padding-right:5px;
	padding-top:0px;
	padding-bottom:0px;
}

div.sheetEditorLineSelector
{
	border: 1px solid transparent;
	cursor: default;
}

div.sheetEditorLineSelector.hover
{
	border: 1px dashed #0d0;
}

div.rowdeselected div.sheetEditorItem.hover,
div.rowselected div.sheetEditorItem.hover
{
	border: 1px dashed #00d;
}

div.sheetEditorOptions
{
	display:none;
	-moz-box-shadow: 8px 8px 5px #888;
	-webkit-box-shadow: 8px 8px 5px #888;
	box-shadow: 8px 8px 5px #888;
}

div.singleSelection div.rowselected div.sheetEditorOptions
{
	border:1px solid #ddd;
	position:absolute;
	padding:4px;
	display:inline;
	background-color:white;
	left:2px;
	white-space: nowrap;
}

div.sheetEditorOptions.at_type_B
{
	top:18px;
	left:auto !important;
}

div.sheetEditorItem
{
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}


div.rowdisplay div.sheetEditorItem.at_type_L
{
	border:1px solid #CCC;
	background-color:#ECECEC;
    padding-left:5px;
	padding-right:5px;
	padding-top:0px;
	padding-bottom:0px;
}

div.rowdisplay div.sheetEditorItem.at_type_E
{
	border:1px solid #CCC;
	background-color:#ECECEC;
    padding-left:5px;
	padding-right:5px;
	padding-top:0px;
	padding-bottom:0px;
}

div.rowdisplay div.sheetEditorItem.at_type_E.at_changemethod_C
{
	height:inherit;
}

div.rowdisplay a:link, div.rowdisplay a:visited
{
	color:inherit;
	text-decoration:none;
}

div.rowdisplay a:hover
{
	color:#FF7600;
}

td.sheetEditorOptionsFieldName
{
	text-align:right;
	font-weight:700;
}

div.sheetEditorControlDetailsLink
{
	float:left;
}

div.sheetEditorOptionsClose
{
	float:right;
	cursor:pointer;
}

.minicolors-theme-olibweb .minicolors-swatch {
    top: 1px;
    left: 60px;
    width: 16px;
    height: 16px;
}
.minicolors-theme-olibweb.minicolors-position-right .minicolors-swatch {
    left: auto;
    right: 5px;
}
.minicolors-theme-olibweb .minicolors-input {
    height: 16px;
    width: 16px;
    display: inline-block;
    padding-left: 0px;
    cursor: pointer;
    left: 9px;
    position: relative;
}
.roninDialogUnder {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	width: expression(document.documentElement.clientWidth +     'px');
	height: expression(document.documentElement.clientHeight +     'px');
	z-index: 992;
	background-color: black;
	filter: alpha(opacity =   25);
	-moz-opacity: .25;
	opacity: .25;
}

.roninDialogShadow {
	padding: 0 5px 5px 0;
	background: url(../images/ronin_dialog_shadowAlpha.png) no-repeat bottom
		right;
	_background: url(../images/ronin_dialog_shadow.gif) repeat;
}

.roningDialogFix {
	border-bottom: 1px solid white;
	visibility: hidden;
}

.d-wrapper {
	position: absolute;
	z-index: 995;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	width: expression(document.documentElement.clientWidth +     'px');
	height: expression(document.documentElement.clientHeight +     'px');
}

.d-container {
	width: 90%;
	position: relative;
	margin: auto;
}

.roninDialogOuter {
	position: absolute;
	z-index: 995;
	width: 100%;
	top: 10px;
}

.roninDialog {
	font-size: 0.8em;
}

.roninDialog .header {
	background-color: #2178B5;
	color: white;
	padding: 2px;
}

.roninDialog .headerContents {
	font-weight: bold;
	float: left;
}

a.dialogCloseButton, img.popupCloseButton {
	float: right;
}

a.dialogCloseButton img,.roninDialog .d-conwrap, .popupCloseButton {
	border: 2px solid #2178B5;
}

.roninDialog .d-conwrap {
	background-color: #FFF;
	border-top: 0;
	padding: 10px;
}

.roninDialog .contents table {
	background-color: #fff;
}

.roninDialogOuter .roninDialog {
	border: 0;
}

.dialogShim {
	position: absolute;
	left: 0;
	top: 0;
	width: expression(document.documentElement.clientWidth +     'px');
	height: expression(document.documentElement.clientHeight +     'px');
	z-index: 990;
	filter: progid :   DXImageTransform.Microsoft.Alpha (   style =   0,
		opacity = 
		 0 );
}

html>body .dialogShim /* This is hidden from IE6 */ {
	display: none;
}

#dialogForm,.dialogTable {
	padding: 0;
	margin: 0;
	width: 100%;
	border: 0;
}

.dialogList table {
	border-style: none;
	width: 100%;
}

.dialogList ul {
	padding-left: 6px;
	padding-right: 6px;
	padding-top: 6px;
	padding-bottom: 6px;
	font-size: 1em;
	margin: 0;
	list-style: none;
}

.dialogList li {
	background-color: transparent;
	padding: 3px 10px;
}

.two-columns ul li {
	_border-bottom: 1px solid white;
}

/* Added CK for Modal Confirm */
/* Fiz - made usability and minor changes */

#confirm .header {
	font-size: 0.8em;
	font-weight: bold;
	background-color: #2178B5;
	color: white;
}

#confirm .headerContents {
	font-weight: bold;
	float: left;
}

 /* Overlay */
#confirmModalOverlay {
	background-color: black;
	/* cursor: wait; */
	opacity: 0.25;
	height: 100%;
	width: 100%;
	position: fixed;
	left: 0px;
	top: 0px;
	z-index: 900;
}

/* Container */
.confirmModalContainer {
	position: fixed;
	width: 420px;
	left: 50%;
	top: 10px;
	margin-left: -210px;
	/* font-family: 'Trebuchet MS', Verdana, Arial; */
	background: #fff;
	border: 2px solid #2178B5;
	z-index: 999;
}

.confirmModalContainer .message {
	margin: 0;
	padding: 12px;
	font-size: 0.8em;
}

.confirmModalContainer a.modalCloseX,.confirmModalContainer a.modalCloseX:link,.confirmModalContainer a.modalCloseX:active,.confirmModalContainer a.modalCloseX:visited {
	text-decoration: none;
	font-weight: bold;
	font-size: 1.1em;
	position: absolute;
	top: -1px;
	left: 400px;
	color: #ddd;
}

.confirmModalContainer a.modalCloseX:hover {
	color: #9bb3b3;
}

.confirmModalContainer a.modalCloseX:hover {
	color: #9bb3b3;
}
/* Sidemenu styles */

#slidemenubar{
    position:absolute;
    font-size: 0.7em;
    z-index: 100;
    width: 190px;
    top: 57px;
    left: -170px;
}

.sideBarFrame {
	height: 450px;
}


.onscr {
    position: static;
}

.ofscr, .ofscr *  {   /* Style for hiding the top level menu contents (similar to accessiblehide used in other products, but specific to this layout */
    position: absolute;
    display: block;
    top: -1000px;
    left:-1000px;
    width: 10px;
    height: 10px;
    overflow: hidden;
}


#tabcontainer {
   position: absolute;
    right:0px;
    top: -1px;
    width: 20px;
}

#mainmenuoptions {
    border-bottom: 1px solid #CCC;
    border-right: 1px solid #CCC;
    padding-right: 2px;
    background-color: #E6E6E6;
}

#mainmenuoptions div {
    /* background: url(../images/mainmenutoparrow.gif) no-repeat right; */
}

#mainmenuoptions a {
    margin-left: 10px;
    text-decoration: none;
    color: #036;
}

#menucontent {
    margin-right: 19px;
    /* min-height doesn't work in IE before 7, has been replaced with 'tabheightfix' below (see #menu1) */
}


ul.limenu {
    padding-left: 0;
    margin-left: 0;
    margin-top: 2px;
    list-style: none;
}

.limenu h2 {
	margin: 0;
	padding: 2px;
	background-color: transparent;
	padding-left: 8px;
	color: #000;
	font-size: 1em;
	border-top: 1px solid #F8F8F8;
}


#menu1, #menu2, #menu3, #menu4, #menu5, #menu6 { /* This defines the minimum active area height for the tab sliding menu trigger */
    overflow: visible;
    height: 525px;  /* tabheightfix: this value should equal the height of all the menu tabs. It's a workaround for older browsers that do not support minimum height */
    /* border-bottom: 1px solid #CCC; */ /* Needs JS fix for IE 6 and below */
}

.container { /* Due to min-height, the border causes issues in IE6 and below needs a cosmetic Javascript Fix */
    padding: 5px;
    padding-top: 3px;
    min-height: 525px;
    border-bottom: 1px solid #CCC;
}

.container, #menu1, #menu2, #menu3, #menu4, #menu5 {
    background:#F8F8F8; /* Sidemenu background color */
    background-image: url(../images/greyline.gif);
    background-position: right;
    background-repeat: repeat-y;
}

/* Styles for Collapsible Menu */

ul.mC { padding: 0px; list-style: none; margin: 0px; }

.mL ul.mC { /* Targets second level headings if they exist */ }

.mC li { margin: 3px 0; color: #CCC; } /* Sub Menu text/link spacing  */


ul.mC span {
	color:#034ea2; 
	font-weight:bold;
	border-top:1px solid #F8F8F8;
	border-bottom:1px solid #EEE;
	cursor: pointer;
	display: block;
	background: url(../images/ronin_panelclosed.gif) no-repeat;
	padding: 3px 0 3px 15px;
}

.mL {
	display:none;
	margin-left: 0;
	background: #F5F5F5 url(../images/vmenugrad.gif) repeat-x;
	border-top: 1px solid #9F9F9F;
	padding: 5px 0 10px 1.5em;
}

.mO {
    display:block;
    background-color: cyan;
}



.cbar { 
    margin: 0px;
    padding: 0px;
}

.cbar .cbar {  /* This unindents all the child list elements */
    margin-left: -1em;
    padding: 0px;    
}



.mL ul.mC .cbar span { /* Sublevel headings */
    background-color: #AEAEAE;
    border-top: 1px solid #8B8B8B;
    padding: 5px 0 5px 5px;
    width: auto;
}

ul.mC span:hover, .mL ul.mC .cbar span:hover {
    border-bottom: 1px solid #666;
    background-color: #EEE;
    border-top:1px solid #FFF /* #AAA */ ;
}


.mL ul.mC .cbar /*, .cbar .cbar li */{ /* Sublevel UL lists */
    margin-top: -1px;
    background-color: #F6F6F6;
    border-bottom: 1px solid #AEAEAE; /* Fixes mozilla spacing bug */
    overflow: hidden;  /* stops the right padding overflow (from the above class) not needed when width removed from ul mc SPan */
}


.mL ul.mC .cbar li {
}


.menucontent li {
    font-size: 0.85em;
}

/* Browser fixes */

/* v-space fixes */
/* IE6 */
.mC li.cbar { margin: 0px; border-bottom: 1px solid #f8f8f8; }

/* IE6/7 */
div.container ul.limenu li { border-top: 1px solid #f8f8f8; }
div.container ul.limenu li li { border-top: 0; }

/* Fixes 1 pixel gap on IE */
#tabcontainer a img {
    vertical-align: top; 
}

li.mloader {
	color: #3179ac;
	list-style: none;
	background: url(../images/mloader.gif) no-repeat;
	padding-left: 20px;
	line-height: 18px;
}
.ac_results {
	padding: 0px;
	border: 1px solid black;
	background-color: white;
	overflow: hidden;
	z-index: 99999;
}

.ac_results ul {
	width: 100%;
	list-style-position: outside;
	list-style: none;
	padding: 0;
	margin: 0;
}

.ac_results li {
	margin: 0px;
	padding: 2px 5px;
	cursor: default;
	display: block;
	/*
	if width will be 100% horizontal scrollbar will apear
	when scroll mode will be used
	*/
	/*width: 100%;*/
	font: menu;
	font-size: 12px;
	/*
	it is very important, if line-height not setted or setted
	in relative units scroll will be broken in firefox
	*/
	line-height: 16px;
	overflow: hidden;
}

.ac_loading {
	background: white url('../images/indicator.gif') right center no-repeat;
}

.ac_odd {
	background-color: #eee;
}

.ac_over {
	background-color: #0A246A;
	color: white;
}
/* The main calendar widget.  DIV containing a table. */

div.calendar {
	z-index: 999; /* To appear above selects but below menu */
}

.calendar {
  position: relative;
  display: none;
  border: 1px solid;
  border-color: #fff #000 #000 #fff;
  font-size: 11px;
  cursor: default;
  background: Window;
  color: WindowText;
  font-family: tahoma,verdana,sans-serif;
}

.calendar table {
  border: 1px solid;
  border-color: #fff #000 #000 #fff;
  font-size: 11px;
  cursor: default;
  background: Window;
  color: WindowText;
  font-family: tahoma,verdana,sans-serif;
}

/* Header part -- contains navigation buttons and day names. */

.calendar .button { /* "<<", "<", ">", ">>" buttons have this class */
  text-align: center;
  padding: 1px;
  border: 1px solid;
  border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
  background: ButtonFace;
}

.calendar .nav {
  /* background: ButtonFace url(menuarrow.gif) no-repeat 100% 100%; Can't find this file, so let's avoid http-404s */
}

.calendar thead .title { /* This holds the current "month, year" */
  font-weight: bold;
  padding: 1px;
  border: 1px solid #000;
  background: ActiveCaption;
  color: CaptionText;
  text-align: center;
}

.calendar thead .headrow { /* Row <TR> containing navigation buttons */
}

.calendar thead .daynames { /* Row <TR> containing the day names */
}

.calendar thead .name { /* Cells <TD> containing the day names */
  border-bottom: 1px solid ButtonShadow;
  padding: 2px;
  text-align: center;
  background: ButtonFace;
  color: ButtonText;
}

.calendar thead .weekend { /* How a weekend day name shows in header */
  color: #f00;
}

.calendar thead .hilite { /* How do the buttons in header appear when hover */
  border: 2px solid;
  padding: 0px;
  border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
}

.calendar thead .active { /* Active (pressed) buttons in header */
  border-width: 1px;
  padding: 2px 0px 0px 2px;
  border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
}

/* The body part -- contains all the days in month. */

.calendar tbody .day { /* Cells <TD> containing month days dates */
  width: 2em;
  text-align: right;
  padding: 2px 4px 2px 2px;
}
.calendar tbody .day.othermonth {
  font-size: 80%;
  color: #aaa;
}
.calendar tbody .day.othermonth.oweekend {
  color: #faa;
}

.calendar table .wn {
  padding: 2px 3px 2px 2px;
  border-right: 1px solid ButtonShadow;
  background: ButtonFace;
  color: ButtonText;
}

.calendar tbody .rowhilite td {
  background: Highlight;
  color: HighlightText;
}

.calendar tbody td.hilite { /* Hovered cells <TD> */
  padding: 1px 3px 1px 1px;
  border-top: 1px solid #fff;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  border-left: 1px solid #fff;
}

.calendar tbody td.active { /* Active (pressed) cells <TD> */
  padding: 2px 2px 0px 2px;
  border: 1px solid;
  border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
}

.calendar tbody td.selected { /* Cell showing selected date */
  font-weight: bold;
  border: 1px solid;
  border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
  padding: 2px 2px 0px 2px;
  background: ButtonFace;
  color: ButtonText;
}

.calendar tbody td.weekend { /* Cells showing weekend days */
  color: #f00;
}

.calendar tbody td.today { /* Cell showing today date */
  font-weight: bold;
  color: #00f;
}

.calendar tbody td.disabled { color: GrayText; }

.calendar tbody .emptycell { /* Empty cells (the best is to hide them) */
  visibility: hidden;
}

.calendar tbody .emptyrow { /* Empty row (some months need less than 6 rows) */
  display: none;
}

/* The footer part -- status bar and "Close" button */

.calendar tfoot .footrow { /* The <TR> in footer (only one right now) */
}

.calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */
  background: ButtonFace;
  padding: 1px;
  border: 1px solid;
  border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
  color: ButtonText;
  text-align: center;
}

.calendar tfoot .hilite { /* Hover style for buttons in footer */
  border-top: 1px solid #fff;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  border-left: 1px solid #fff;
  padding: 1px;
  background: #e4e0d8;
}

.calendar tfoot .active { /* Active (pressed) style for buttons in footer */
  padding: 2px 0px 0px 2px;
  border-top: 1px solid #000;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  border-left: 1px solid #000;
}

/* Combo boxes (menus that display months/years for direct selection) */

.calendar .combo {
  position: absolute;
  display: none;
  width: 4em;
  top: 0px;
  left: 0px;
  cursor: default;
  border: 1px solid;
  border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
  background: Menu;
  color: MenuText;
  font-size: 90%;
  padding: 1px;
  z-index: 100;
}

.calendar .combo .label,
.calendar .combo .label-IEfix {
  text-align: center;
  padding: 1px;
}

.calendar .combo .label-IEfix {
  width: 4em;
}

.calendar .combo .active {
  padding: 0px;
  border: 1px solid #000;
}

.calendar .combo .hilite {
  background: Highlight;
  color: HighlightText;
}

.calendar td.time {
  border-top: 1px solid ButtonShadow;
  padding: 1px 0px;
  text-align: center;
  background-color: ButtonFace;
}

.calendar td.time .hour,
.calendar td.time .minute,
.calendar td.time .ampm {
  padding: 0px 3px 0px 4px;
  border: 1px solid #889;
  font-weight: bold;
  background-color: Menu;
}

.calendar td.time .ampm {
  text-align: center;
}

.calendar td.time .colon {
  padding: 0px 2px 0px 3px;
  font-weight: bold;
}

.calendar td.time span.hilite {
  border-color: #000;
  background-color: Highlight;
  color: HighlightText;
}

.calendar td.time span.active {
  border-color: #f00;
  background-color: #000;
  color: #0f0;
}
/***
Spectrum Colorpicker v1.8.0
https://github.com/bgrins/spectrum
Author: Brian Grinstead
License: MIT
***/

.sp-container {
    position:absolute;
    top:0;
    left:0;
    display:inline-block;
    *display: inline;
    *zoom: 1;
    /* https://github.com/bgrins/spectrum/issues/40 */
    z-index: 9999994;
    overflow: hidden;
}
.sp-container.sp-flat {
    position: relative;
}

/* Fix for * { box-sizing: border-box; } */
.sp-container,
.sp-container * {
    -webkit-box-sizing: content-box;
       -moz-box-sizing: content-box;
            box-sizing: content-box;
}

/* http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio */
.sp-top {
  position:relative;
  width: 100%;
  display:inline-block;
}
.sp-top-inner {
   position:absolute;
   top:0;
   left:0;
   bottom:0;
   right:0;
}
.sp-color {
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    right:20%;
}
.sp-hue {
    position: absolute;
    top:0;
    right:0;
    bottom:0;
    left:84%;
    height: 100%;
}

.sp-clear-enabled .sp-hue {
    top:33px;
    height: 77.5%;
}

.sp-fill {
    padding-top: 80%;
}
.sp-sat, .sp-val {
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

.sp-alpha-enabled .sp-top {
    margin-bottom: 18px;
}
.sp-alpha-enabled .sp-alpha {
    display: block;
}
.sp-alpha-handle {
    position:absolute;
    top:-4px;
    bottom: -4px;
    width: 6px;
    left: 50%;
    cursor: pointer;
    border: 1px solid black;
    background: white;
    opacity: .8;
}
.sp-alpha {
    display: none;
    position: absolute;
    bottom: -14px;
    right: 0;
    left: 0;
    height: 8px;
}
.sp-alpha-inner {
    border: solid 1px #333;
}

.sp-clear {
    display: none;
}

.sp-clear.sp-clear-display {
    background-position: center;
}

.sp-clear-enabled .sp-clear {
    display: block;
    position:absolute;
    top:0px;
    right:0;
    bottom:0;
    left:84%;
    height: 28px;
}

/* Don't allow text selection */
.sp-container, .sp-replacer, .sp-preview, .sp-dragger, .sp-slider, .sp-alpha, .sp-clear, .sp-alpha-handle, .sp-container.sp-dragging .sp-input, .sp-container button  {
    -webkit-user-select:none;
    -moz-user-select: -moz-none;
    -o-user-select:none;
    user-select: none;
}

.sp-container.sp-input-disabled .sp-input-container {
    display: none;
}
.sp-container.sp-buttons-disabled .sp-button-container {
    display: none;
}
.sp-container.sp-palette-buttons-disabled .sp-palette-button-container {
    display: none;
}
.sp-palette-only .sp-picker-container {
    display: none;
}
.sp-palette-disabled .sp-palette-container {
    display: none;
}

.sp-initial-disabled .sp-initial {
    display: none;
}


/* Gradients for hue, saturation and value instead of images.  Not pretty... but it works */
.sp-sat {
    background-image: -webkit-gradient(linear,  0 0, 100% 0, from(#FFF), to(rgba(204, 154, 129, 0)));
    background-image: -webkit-linear-gradient(left, #FFF, rgba(204, 154, 129, 0));
    background-image: -moz-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
    background-image: -o-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
    background-image: -ms-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
    background-image: linear-gradient(to right, #fff, rgba(204, 154, 129, 0));
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr=#FFFFFFFF, endColorstr=#00CC9A81)";
    filter : progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr='#FFFFFFFF', endColorstr='#00CC9A81');
}
.sp-val {
    background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000000), to(rgba(204, 154, 129, 0)));
    background-image: -webkit-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0));
    background-image: -moz-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
    background-image: -o-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
    background-image: -ms-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
    background-image: linear-gradient(to top, #000, rgba(204, 154, 129, 0));
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00CC9A81, endColorstr=#FF000000)";
    filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#00CC9A81', endColorstr='#FF000000');
}

.sp-hue {
    background: -moz-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
    background: -ms-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
    background: -o-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), color-stop(0.17, #ffff00), color-stop(0.33, #00ff00), color-stop(0.5, #00ffff), color-stop(0.67, #0000ff), color-stop(0.83, #ff00ff), to(#ff0000));
    background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
    background: linear-gradient(to bottom, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
}

/* IE filters do not support multiple color stops.
   Generate 6 divs, line them up, and do two color gradients for each.
   Yes, really.
 */
.sp-1 {
    height:17%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ffff00');
}
.sp-2 {
    height:16%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff00', endColorstr='#00ff00');
}
.sp-3 {
    height:17%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff00', endColorstr='#00ffff');
}
.sp-4 {
    height:17%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffff', endColorstr='#0000ff');
}
.sp-5 {
    height:16%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#ff00ff');
}
.sp-6 {
    height:17%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00ff', endColorstr='#ff0000');
}

.sp-hidden {
    display: none !important;
}

/* Clearfix hack */
.sp-cf:before, .sp-cf:after { content: ""; display: table; }
.sp-cf:after { clear: both; }
.sp-cf { *zoom: 1; }

/* Mobile devices, make hue slider bigger so it is easier to slide */
@media (max-device-width: 480px) {
    .sp-color { right: 40%; }
    .sp-hue { left: 63%; }
    .sp-fill { padding-top: 60%; }
}
.sp-dragger {
   border-radius: 5px;
   height: 5px;
   width: 5px;
   border: 1px solid #fff;
   background: #000;
   cursor: pointer;
   position:absolute;
   top:0;
   left: 0;
}
.sp-slider {
    position: absolute;
    top:0;
    cursor:pointer;
    height: 3px;
    left: -1px;
    right: -1px;
    border: 1px solid #000;
    background: white;
    opacity: .8;
}

/*
Theme authors:
Here are the basic themeable display options (colors, fonts, global widths).
See http://bgrins.github.io/spectrum/themes/ for instructions.
*/

.sp-container {
    border-radius: 0;
    background-color: #ECECEC;
    border: solid 1px #f0c49B;
    padding: 0;
}
.sp-container, .sp-container button, .sp-container input, .sp-color, .sp-hue, .sp-clear {
    font: normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
.sp-top {
    margin-bottom: 3px;
}
.sp-color, .sp-hue, .sp-clear {
    border: solid 1px #666;
}

/* Input */
.sp-input-container {
    float:right;
    width: 100px;
    margin-bottom: 4px;
}
.sp-initial-disabled  .sp-input-container {
    width: 100%;
}
.sp-input {
   font-size: 12px !important;
   border: 1px inset;
   padding: 4px 5px;
   margin: 0;
   width: 100%;
   background:transparent;
   border-radius: 3px;
   color: #222;
}
.sp-input:focus  {
    border: 1px solid orange;
}
.sp-input.sp-validation-error {
    border: 1px solid red;
    background: #fdd;
}
.sp-picker-container , .sp-palette-container {
    float:left;
    position: relative;
    padding: 10px;
    padding-bottom: 300px;
    margin-bottom: -290px;
}
.sp-picker-container {
    width: 172px;
    border-left: solid 1px #fff;
}

/* Palettes */
.sp-palette-container {
    border-right: solid 1px #ccc;
}

.sp-palette-only .sp-palette-container {
    border: 0;
}

.sp-palette .sp-thumb-el {
    display: block;
    position:relative;
    float:left;
    width: 24px;
    height: 15px;
    margin: 3px;
    cursor: pointer;
    border:solid 2px transparent;
}
.sp-palette .sp-thumb-el:hover, .sp-palette .sp-thumb-el.sp-thumb-active {
    border-color: orange;
}
.sp-thumb-el {
    position:relative;
}

/* Initial */
.sp-initial {
    float: left;
    border: solid 1px #333;
}
.sp-initial span {
    width: 30px;
    height: 25px;
    border:none;
    display:block;
    float:left;
    margin:0;
}

.sp-initial .sp-clear-display {
    background-position: center;
}

/* Buttons */
.sp-palette-button-container,
.sp-button-container {
    float: right;
}

/* Replacer (the little preview div that shows up instead of the <input>) */
.sp-replacer {
    margin:0;
    overflow:hidden;
    cursor:pointer;
    padding: 4px;
    display:inline-block;
    *zoom: 1;
    *display: inline;
    border: solid 1px #91765d;
    background: #eee;
    color: #333;
    vertical-align: middle;
}
.sp-replacer:hover, .sp-replacer.sp-active {
    border-color: #F0C49B;
    color: #111;
}
.sp-replacer.sp-disabled {
    cursor:default;
    border-color: silver;
    color: silver;
}
.sp-dd {
    padding: 2px 0;
    height: 16px;
    line-height: 16px;
    float:left;
    font-size:10px;
}
.sp-preview {
    position:relative;
    width:25px;
    height: 20px;
    border: solid 1px #222;
    margin-right: 5px;
    float:left;
    z-index: 0;
}

.sp-palette {
    *width: 220px;
    max-width: 220px;
}
.sp-palette .sp-thumb-el {
    width:16px;
    height: 16px;
    margin:2px 1px;
    border: solid 1px #d0d0d0;
}

.sp-container {
    padding-bottom:0;
}


/* Buttons: http://hellohappy.org/css3-buttons/ */
.sp-container button {
  background-color: #eeeeee;
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
  background-image: linear-gradient(to bottom, #eeeeee, #cccccc);
  border: 1px solid #ccc;
  border-bottom: 1px solid #bbb;
  border-radius: 3px;
  color: #333;
  font-size: 14px;
  line-height: 1;
  padding: 5px 4px;
  text-align: center;
  text-shadow: 0 1px 0 #eee;
  vertical-align: middle;
}
.sp-container button:hover {
    background-color: #dddddd;
    background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: linear-gradient(to bottom, #dddddd, #bbbbbb);
    border: 1px solid #bbb;
    border-bottom: 1px solid #999;
    cursor: pointer;
    text-shadow: 0 1px 0 #ddd;
}
.sp-container button:active {
    border: 1px solid #aaa;
    border-bottom: 1px solid #888;
    -webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
    -moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
    -ms-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
    -o-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
    box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
}
.sp-cancel {
    font-size: 11px;
    color: #d93f3f !important;
    margin:0;
    padding:2px;
    margin-right: 5px;
    vertical-align: middle;
    text-decoration:none;

}
.sp-cancel:hover {
    color: #d93f3f !important;
    text-decoration: underline;
}


.sp-palette span:hover, .sp-palette span.sp-thumb-active {
    border-color: #000;
}

.sp-preview, .sp-alpha, .sp-thumb-el {
    position:relative;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
}
.sp-preview-inner, .sp-alpha-inner, .sp-thumb-inner {
    display:block;
    position:absolute;
    top:0;left:0;bottom:0;right:0;
}

.sp-palette .sp-thumb-inner {
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=);
}

.sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=);
}

.sp-clear-display {
    background-repeat:no-repeat;
    background-position: center;
    background-image: url(data:image/gif;base64,R0lGODlhFAAUAPcAAAAAAJmZmZ2dnZ6enqKioqOjo6SkpKWlpaampqenp6ioqKmpqaqqqqurq/Hx8fLy8vT09PX19ff39/j4+Pn5+fr6+vv7+wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAAUABQAAAihAP9FoPCvoMGDBy08+EdhQAIJCCMybCDAAYUEARBAlFiQQoMABQhKUJBxY0SPICEYHBnggEmDKAuoPMjS5cGYMxHW3IiT478JJA8M/CjTZ0GgLRekNGpwAsYABHIypcAgQMsITDtWJYBR6NSqMico9cqR6tKfY7GeBCuVwlipDNmefAtTrkSzB1RaIAoXodsABiZAEFB06gIBWC1mLVgBa0AAOw==);
}